<!-- 
  国际化（语言切换）
  组件独立功能，不需要与其他组件通信
 -->
<template>
  <div class="content">
    <el-dropdown trigger="click" @command='handleSetLanguage'>
      <span class="el-dropdown-link">
        <span>{{ $t('langName') }}</span>
        <el-icon title="语言切换"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="zh" :disabled="$t('langName') == '中文'">中文</el-dropdown-item>
          <el-dropdown-item command="en" :disabled="$t('langName') == 'English'">English</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'//引入的图标
import { i18n } from "@/i18n";
import { ElMessage } from 'element-plus';

// 语言切换事件
const handleSetLanguage = (localeName: never) => {
  i18n.global.locale = localeName//全局语言环境
  localStorage.setItem('language', localeName)
  ElMessage.success('语言切换成功')
}
</script>

<style lang="less" scoped>
.content {
  display: inline-flex;
  align-items: center;

  .el-dropdown-link {
    display: inline-flex;
    align-items: center;

    span {
      margin-right: 5px;
    }
  }
}
</style>